<template>
    <div class="pdfjs">
          <iframe width="100%" frameborder="0" style="width: 100%; height: 100%;" id="viewerContainer"
            v-if ="pdfUrl" :src="pdfSrc"></iframe>
    </div>
</template>

<script>
    export default {
        components: {

        },
        data() {
            return {
                 //参数展示pdf地址,这个地址应该是后台传值也就是URL参数，现为测试写成固定
                 pdfUrl: "https://aaeasy-file.newbanker.cn/pic/testforyuhan/裴士杰的专属报告_2021-11-02_11_17_21.pdf",
                 pdfUrl: "https://h5-qasa.chtfund.com/test.pdf",//发票
                 // pdfUrl:"http://hlhapp-qasa.chtfund.com/web/content/file/fastDFS/downloadNew?filePath=M00/0A/B6/rBCjQmBO1XSAXj1pAAYQhffg_60328.pdf&fileName=44CQ6aOO6Zmp5o+t56S65Lmm44CR5oGS5aSp6LSi5a+M56eB5Yuf5oqV6LWE5Z+66YeRLnBkZg==&groupName=group1&show=1",
                 viewerUrl: '/static/pdfjs/web/viewer.html', // pdfjs模板
                 pdfSrc: '',//本页渲染pdf地址

            };
        },
        methods: {
            loadPDF() {
                //pdfSrc ：pdf存放的文件路径，可以是本地的，也可以是远程，这个是远程的，亲测可以用，用决对路径避免打包404
                //ie有缓存加个随机数解决 + '?r=' + new Date()
                this.pdfSrc=`${this.viewerUrl}?file=${encodeURIComponent(this.pdfUrl)}`
            },
        },
        mounted: function() {
           this.loadPDF();
        },
    };
</script>
<style lang="scss" scoped>
   .pdfjs {width:100%;    height: 90vh;}
</style>
